<template>
  <BasicDrawer
    class="wyf-drawer"
    v-bind="$attrs"
    @register="registerBaseDrawer"
    :title="title"
    width="60%"
    :showFooter="showFooter"
    :loading="loading"
    destroyOnClose
  >
    <div v-for="item in detailSchema" :key="item.field">
      <div class="wyf-form-item-box">
        <template v-if="item.slot">
          <div class="wyf-form-item-title">{{ item.field }}</div>
        </template>
        <template v-else>
          <div class="wyf-form-item-label">{{ item.label }}：</div>
          <div class="wyf-form-item-text" v-if="item.component == 'JImageUpload'">
            <a-image-preview-group>
              <a-image
                :width="100"
                :height="100"
                :src="info[item.field] || 'https://www.antdv.com/#error'"
                fallback=""
              />
              <!-- <span class="wyf-m-r-20"></span> -->
              <!-- <a-image :width="100" :height="100" src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" /> -->
            </a-image-preview-group>
          </div>
          <div class="wyf-form-item-text v-else">
            <span :class="item?.color && item?.color(info[item.field])">{{ info[item.field] || '' }} </span>
          </div>
        </template>
      </div>
      <template v-if="item.field == '住客信息' && !item?.isTable">
        <div class="wyf-form-item-box personalization-box" v-for="(item, index) in info?.tenantsList || []" :key="item.id">
          <div class="wyf-form-item-label personalization-label">住客{{ index + 1 }}：</div>
          <div class="wyf-form-item-text wyf-flex">
            <div class="width-155">
              <div>{{ item.xm }}</div>
              <div>{{ item.zjhm }}</div>
              <div>{{ item.lxdh }}</div>
              <div class="text-green" v-if="item.rzbz == 1">实名认证</div>
              <div class="text-waring" v-else-if="item.rzbz == 4">实人认证未通过</div>
              <div class="text-waring" v-else-if="item.rzbz == 2">实名认证未通过</div>
              <div class="text-green" v-else-if="item.rzbz == 3">实人认证</div>
              <div class="text-red" v-else-if="item.rzbz == 5">未认证</div>
            </div>
            <a-image
              :width="100"
              :height="100"
              :src="item.headPortraitUrl || 'https://www.antdv.com/#error'"
              fallback=""
            />
          </div>
        </div>
      </template>
      <BasicTable
        @register="registerTable"
        v-else-if="item?.isTable && item.field != '未成年信息' && item?.field != '证件人信息' && item.field != '住客信息'"
      />
      <BasicTable
        @register="registerTableTow"
        v-else-if="item?.isTable && (item.field == '未成年信息' || item?.field == '证件人信息' || item?.field == '住客信息')"
      />
    </div>
  </BasicDrawer>
</template>
<script lang="ts" setup>
  import { ref, useAttrs, computed } from 'vue';
  import {
    detailSchemaNoCheckIn,
    detailSchemaAbnormalOperation,
    historyColumns,
    openinghColumns,
    detailSchemaFrequentOpening,
    detailSchemaLongTermStay,
    historyLongTermStayColumns,
    detailSchemaMinor,
    underageColumns,
    guardianColumns,
    detailSchemaStayMore,
    detailSchemaFrequentRoomChanges,
    historyColumnsStayMore,
    columnsRZStayMore,
    historyColumnsFrequentRoomChanges,
    columnsRZFrequentRoomChanges,
  } from '../index.data';
  import { BasicDrawer, useDrawerInner, useDrawer } from '/@/components/Drawer';
  import { BasicTable, useTable } from '/@/components/Table';
  import { detail } from '../index.api';
  //import { useDrawerAdaptiveWidth } from '/@/hooks/jeecg/useAdaptiveWidth';
  const props = defineProps({
    type: { type: String, default: 'detailSchemaNoCheckIn' },
  });
  // 声明Emits
  const emit = defineEmits(['success', 'register']);
  const attrs = useAttrs();
  const rowId = ref('');
  const showFooter = ref(true);
  const isUpdate = ref(true);
  const loading = ref(false); //审核 pending
  const info: any = ref({});
  const title = ref('');
  //注册drawer
  const [registerDrawer, { openDrawer }] = useDrawer();
  //注册table
  const [registerTable] = useTable({
    title: '',
    //api: detail,
    columns:
      props.type == 'detailSchemaAbnormalOperation'
        ? historyColumns
        : props.type == 'detailSchemaFrequentOpening'
          ? openinghColumns
          : props.type == 'detailSchemaLongTermStay'
            ? historyLongTermStayColumns
            : props.type == 'detailSchemaMinor'
              ? guardianColumns
              : props.type == 'detailSchemaStayMore'
                ? historyColumnsStayMore
                : props.type == 'detailSchemaFrequentRoomChanges'
                  ? historyColumnsFrequentRoomChanges
                  : [],
    striped: false,
    useSearchForm: false,
    showTableSetting: false,
    clickToRowSelect: false,
    bordered: false,
    showIndexColumn: false,
    // 【issues/1064】列设置的 cacheKey
    //tableSetting: { fullScreen: true, cacheKey: 'role_user_table' },
    canResize: false,
    rowKey: 'id',
    scroll: { x: 600 },
  });
  //注册table
  const [registerTableTow] = useTable({
    title: '',
    //api: detail,
    columns:
      props.type == 'detailSchemaMinor'
        ? underageColumns
        : props.type == 'detailSchemaStayMore'
          ? columnsRZStayMore
          : props.type == 'detailSchemaFrequentRoomChanges'
            ? columnsRZFrequentRoomChanges
            : [],
    striped: false,
    useSearchForm: false,
    showTableSetting: false,
    clickToRowSelect: false,
    bordered: false,
    showIndexColumn: false,
    // 【issues/1064】列设置的 cacheKey
    //tableSetting: { fullScreen: true, cacheKey: 'role_user_table' },
    canResize: false,
    rowKey: 'id',
    scroll: { x: 600 },
  });
  //注册drawer
  const [registerBaseDrawer, { setDrawerProps }] = useDrawerInner(async (data) => {
    showFooter.value = data?.showFooter ?? true;
    setDrawerProps({ confirmLoading: true, showFooter: showFooter.value });
    rowId.value = data.record.id;
    title.value = data.title;
    loading.value = true;
    let res = await detail({ id: rowId.value });
    isUpdate.value = !!data?.isUpdate;
    info.value = res;
    setDrawerProps({ confirmLoading: false });
    loading.value = false;
  });

  //设置表单数据
  const detailSchema = computed(() => {
    switch (props.type) {
      case 'detailSchemaNoCheckIn':
        return detailSchemaNoCheckIn;
      case 'detailSchemaAbnormalOperation':
        return detailSchemaAbnormalOperation;
      case 'detailSchemaFrequentOpening':
        return detailSchemaFrequentOpening;
      case 'detailSchemaLongTermStay':
        return detailSchemaLongTermStay;
      case 'detailSchemaMinor':
        return detailSchemaMinor;
      case 'detailSchemaStayMore':
        return detailSchemaStayMore;
      case 'detailSchemaFrequentRoomChanges':
        return detailSchemaFrequentRoomChanges;
      default:
        return detailSchemaNoCheckIn;
    }
  });
  /**
   * 详情
   */
  async function handleDetail(record: Recordable) {
    openDrawer(true, {
      record,
      isUpdate: true,
    });
  }
  // const { adaptiveWidth } = useDrawerAdaptiveWidth();
</script>
<style lang="less" scoped>
  .width-155 {
    width: 155px;
  }
  .personalization-label {
    width: auto;
    min-width: auto;
    text-align: left;
  }
</style>
